<template>
    <div>
      <img src="../assets/backg.jpg" id="img">
      <div id="app">
        <el-form :model="form" :rules="rules">
          <p>管理员登陆</p>
          <el-form-item prop="name">
            <el-input v-model="form.name" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="form.password" placeholder="密码" type="password"></el-input>
          </el-form-item>
          <el-form-item prop="past">
            <el-input v-model="form.past" placeholder="验证码" id="past"></el-input>
          </el-form-item>
          <img src="http://localhost:3000/code" alt="看不清？点击刷新" ref="captcha" id="img1" />
        </el-form>
        <el-button type="primary" v-on:click="click" id="submit">登陆</el-button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        form: {
          name: '',
          password: '',
          past: ''
        },
        rules: {
          name: [{ message: '账号不能为空', required: true, tigger: 'blur' }],
          password: [{ message: '密码不能为空', required: true, tigger: 'blur' }],
          past: [{ message: '验证码不能为空', required: true, tigger: 'blur' }]
        }
      }
    },
    methods: {
      async click() {
        let result = await this.$axios.post('/',
          {
            username: this.form.name,
            pwd: this.form.password,
            past: this.form.past
          }
        )
        console.log(result)
        if (result.error_code === 1) {
          console.log(result)
          // 将token存到userToken中     
          // this.userToken = res.data.data.token
          // 将token本地存储到回话中
          localStorage.setItem('token', result.token);
          this.$message({
            type: "success",
            message: "登录成功"
          })
          this.$router.push({
            path: "/home",
          });
        } else {
          this.$message.error("登陆失败");
        }
      },
    }
  }
  </script>
  <style>
  #img {
    float: left;
    height: 960px;
    width: 1600px;
  }
  
  #app {
    float: left;
    width: 210px;
    margin-left: 50px;
    margin-top: 300px;
  }
  
  #past {
    width: 100px;
  }
  
  #submit {
    width: 210px;
    position: relative;
    top: -20px;
  }
  
  #img1 {
    margin-left: 110px;
    position: relative;
    bottom: 62px;
  }</style>